<script>

import * as echarts from 'echarts';
import axios from 'axios'
import { SelectProps } from 'element-plus/es/components/select/src/select';
import bj from '../json/bj.json'
import sh from '../json/sh.json'
import zz from '../json/zz.json'
import cs from '../json/cs.json'
import gz from '../json/gz.json'
import cq from '../json/cq.json'
import heb from '../json/heb.json'
import wh from '../json/wh.json'
    export default{
        data(){
            return{
                charts:null,
                city:null,
                citys: ["北京","上海","郑州","长沙","广州","重庆","哈尔滨","武汉"],
                url:"http://39.106.84.74:8060/map",
                mapUrls:[
                    "https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json",
                    "https://geo.datav.aliyun.com/areas_v3/bound/310000_full.json",
                    "https://geo.datav.aliyun.com/areas_v3/bound/410100_full.json",
                    "https://geo.datav.aliyun.com/areas_v3/bound/430100_full.json",
                    "https://geo.datav.aliyun.com/areas_v3/bound/440100_full.json",
                    "https://geo.datav.aliyun.com/areas_v3/bound/500000_full.json",
                    "https://geo.datav.aliyun.com/areas_v3/bound/230100_full.json",
                    "https://geo.datav.aliyun.com/areas_v3/bound/420100_full.json"
                ],
                mapData:[bj,sh,zz,cs,gz,cq,heb,wh]
            }
        },
        mounted(){
            this.city = this.$route.params.city
            if (echarts.getInstanceByDom(document.getElementById("chart")) == undefined){
                this.chart = echarts.init(document.getElementById("chart") );
            }
            this.chart.showLoading()
            for(var i = 0;i<8;i++){
                if(this.city == this.citys[i]){
                    this.chart.hideLoading()
                    echarts.registerMap(this.citys[i],this.mapData[i])
                    this.getMap(this.chart,this.citys[i])
                    break;
                }
            }
            
        },
        methods:{
            getMap(chart,city){
                console.log(city)
                axios.get(this.url,{params:{
                    "city":city
                }}).then( (response) => {
                    chart.setOption(response.data)
                } )
            }
        }
    }
</script>

<template>
    {{ this.$route.params.city }}
    <keep-alive>
        <div class="map-container">
            <div id="chart" class="Map"></div>
        </div>
    </keep-alive>
    
</template>

<style>
    .map-container{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        .Map{
            height: 100%;
            width: 100%;
        }
    }
</style>